<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量操作 - DNF福利盒子</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f2f2f7;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        .status-bar {
            height: 44px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 14px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .nav-bar {
            height: 44px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid #e5e5ea;
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .content {
            padding: 88px 16px 83px;
            height: calc(100vh - 127px);
            overflow-y: auto;
        }
        .tab-bar {
            height: 83px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #e5e5ea;
            z-index: 1000;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #8e8e93;
            font-size: 10px;
        }
        .tab-item.active {
            color: #007aff;
        }
        .tab-item i {
            font-size: 22px;
        }
        .section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #fafafa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .checkbox-item:hover {
            background: #f0f7ff;
        }
        .checkbox-item.selected {
            background: #e6f3ff;
            border: 2px solid #007aff;
        }
        .checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #007aff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .checkbox.checked {
            background: #007aff;
        }
        .checkbox.checked::after {
            content: '✓';
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        .item-info {
            flex: 1;
        }
        .item-name {
            font-size: 16px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 4px;
        }
        .item-desc {
            font-size: 12px;
            color: #8e8e93;
        }
        .schedule-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 16px;
        }
        .time-input {
            padding: 12px;
            border: 1px solid #e5e5ea;
            border-radius: 8px;
            font-size: 16px;
            text-align: center;
        }
        .btn {
            padding: 16px;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }
        .btn-primary {
            background: #007aff;
            color: white;
        }
        .btn-primary:hover {
            background: #0056d6;
        }
        .btn-secondary {
            background: #f2f2f7;
            color: #1d1d1f;
        }
        .btn-secondary:hover {
            background: #e5e5ea;
        }
        .btn-danger {
            background: #ff3b30;
            color: white;
        }
        .btn-danger:hover {
            background: #d70015;
        }
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e5e5ea;
            border-radius: 3px;
            overflow: hidden;
            margin: 12px 0;
        }
        .progress-fill {
            height: 100%;
            background: #007aff;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .status-text {
            font-size: 14px;
            color: #8e8e93;
            text-align: center;
        }
        .result-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 16px;
        }
        .result-item {
            background: #fafafa;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .result-value {
            font-size: 18px;
            font-weight: 600;
            color: #1d1d1f;
        }
        .result-label {
            font-size: 12px;
            color: #8e8e93;
        }
        .success {
            color: #34c759;
        }
        .warning {
            color: #ff9500;
        }
        .error {
            color: #ff3b30;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>12:34</span>
        <span>📶 5G</span>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
        <span>批量操作</span>
        <span></span>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <!-- 选择盒子 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-cubes"></i>
                <span>选择盒子</span>
            </div>
            <div class="checkbox-group">
                <div class="checkbox-item selected" onclick="toggleSelection(this)">
                    <div class="checkbox checked"></div>
                    <div class="item-info">
                        <div class="item-name">主号盒子</div>
                        <div class="item-desc">已登录 · 默认盒子</div>
                    </div>
                </div>
                <div class="checkbox-item" onclick="toggleSelection(this)">
                    <div class="checkbox"></div>
                    <div class="item-info">
                        <div class="item-name">小号盒子1</div>
                        <div class="item-desc">已登录 · 上次领取: 2小时前</div>
                    </div>
                </div>
                <div class="checkbox-item" onclick="toggleSelection(this)">
                    <div class="checkbox"></div>
                    <div class="item-info">
                        <div class="item-name">小号盒子2</div>
                        <div class="item-desc">未登录</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 选择活动 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-gift"></i>
                <span>选择活动</span>
            </div>
            <div class="checkbox-group">
                <div class="checkbox-item selected" onclick="toggleSelection(this)">
                    <div class="checkbox checked"></div>
                    <div class="item-info">
                        <div class="item-name">黑色序章宿命回响</div>
                        <div class="item-desc">2025-08-28 至 2025-09-25</div>
                    </div>
                </div>
                <div class="checkbox-item selected" onclick="toggleSelection(this)">
                    <div class="checkbox checked"></div>
                    <div class="item-info">
                        <div class="item-name">2025DNF井盖杯</div>
                        <div class="item-desc">2025-08-11 至 2025-09-12</div>
                    </div>
                </div>
                <div class="checkbox-item" onclick="toggleSelection(this)">
                    <div class="checkbox"></div>
                    <div class="item-info">
                        <div class="item-name">夏日狂欢节</div>
                        <div class="item-desc">2025-07-01 至 2025-08-15</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 定时设置 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-clock"></i>
                <span>定时设置</span>
            </div>
            <div class="schedule-controls">
                <input type="time" class="time-input" value="09:00">
                <select class="time-input">
                    <option>每天</option>
                    <option>每周一</option>
                    <option>每周二</option>
                    <option>每周三</option>
                    <option>每周四</option>
                    <option>每周五</option>
                    <option>每周六</option>
                    <option>每周日</option>
                </select>
            </div>
            <div style="margin-top: 16px;">
                <div class="checkbox-item" onclick="toggleSelection(this)">
                    <div class="checkbox"></div>
                    <div class="item-info">
                        <div class="item-name">启用定时任务</div>
                        <div class="item-desc">在指定时间自动执行批量领取</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 执行控制 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-play-circle"></i>
                <span>执行控制</span>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                <button class="btn btn-primary" onclick="startBatchOperation()">
                    <i class="fas fa-play"></i> 开始执行
                </button>
                <button class="btn btn-secondary" onclick="stopBatchOperation()">
                    <i class="fas fa-stop"></i> 停止
                </button>
            </div>
            
            <!-- 进度条 -->
            <div class="progress-bar">
                <div class="progress-fill" style="width: 0%"></div>
            </div>
            <div class="status-text" id="statusText">准备就绪</div>
            
            <!-- 结果统计 -->
            <div class="result-grid">
                <div class="result-item">
                    <div class="result-value success" id="successCount">0</div>
                    <div class="result-label">成功</div>
                </div>
                <div class="result-item">
                    <div class="result-value warning" id="warningCount">0</div>
                    <div class="result-label">警告</div>
                </div>
                <div class="result-item">
                    <div class="result-value error" id="errorCount">0</div>
                    <div class="result-label">失败</div>
                </div>
                <div class="result-item">
                    <div class="result-value" id="totalCount">0</div>
                    <div class="result-label">总计</div>
                </div>
            </div>
        </div>

        <!-- 高级设置 -->
        <div class="section">
            <div class="section-title">
                <i class="fas fa-cog"></i>
                <span>高级设置</span>
            </div>
            <div class="checkbox-group">
                <div class="checkbox-item selected" onclick="toggleSelection(this)">
                    <div class="checkbox checked"></div>
                    <div class="item-info">
                        <div class="item-name">智能延迟</div>
                        <div class="item-desc">避免频繁请求导致的封禁风险</div>
                    </div>
                </div>
                <div class="checkbox-item" onclick="toggleSelection(this)">
                    <div class="checkbox"></div>
                    <div class="item-info">
                        <div class="item-name">失败重试</div>
                        <div class="item-desc">自动重试失败的领取操作</div>
                    </div>
                </div>
                <div class="checkbox-item selected" onclick="toggleSelection(this)">
                    <div class="checkbox checked"></div>
                    <div class="item-info">
                        <div class="item-name">结果通知</div>
                        <div class="item-desc">任务完成后发送推送通知</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px;">
            <button class="btn btn-secondary" onclick="saveSchedule()">
                <i class="fas fa-save"></i> 保存配置
            </button>
            <button class="btn btn-danger" onclick="clearAll()">
                <i class="fas fa-trash"></i> 清除记录
            </button>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="fas fa-gift"></i>
            <span>福利</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-cubes"></i>
            <span>盒子</span>
        </div>
        <div class="tab-item active">
            <i class="fas fa-bolt"></i>
            <span>批量</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>

    <script>
        function toggleSelection(item) {
            const checkbox = item.querySelector('.checkbox');
            checkbox.classList.toggle('checked');
            item.classList.toggle('selected');
        }

        function startBatchOperation() {
            const progressBar = document.querySelector('.progress-fill');
            const statusText = document.getElementById('statusText');
            const successCount = document.getElementById('successCount');
            const warningCount = document.getElementById('warningCount');
            const errorCount = document.getElementById('errorCount');
            const totalCount = document.getElementById('totalCount');
            
            // 模拟执行过程
            let progress = 0;
            statusText.textContent = '开始批量操作...';
            
            const interval = setInterval(() => {
                progress += 5;
                progressBar.style.width = progress + '%';
                
                if (progress >= 100) {
                    clearInterval(interval);
                    statusText.textContent = '批量操作完成！';
                    successCount.textContent = '8';
                    warningCount.textContent = '1';
                    errorCount.textContent = '0';
                    totalCount.textContent = '9';
                    
                    // 显示详细结果
                    setTimeout(() => {
                        alert('批量操作完成！\n\n成功: 8个操作\n警告: 1个操作（需要登录）\n失败: 0个操作\n\n总计: 9个操作');
                    }, 500);
                } else if (progress === 25) {
                    statusText.textContent = '正在处理主号盒子...';
                } else if (progress === 50) {
                    statusText.textContent = '正在处理小号盒子1...';
                } else if (progress === 75) {
                    statusText.textContent = '正在处理小号盒子2...';
                }
            }, 100);
        }

        function stopBatchOperation() {
            alert('停止批量操作');
            document.querySelector('.progress-fill').style.width = '0%';
            document.getElementById('statusText').textContent = '操作已停止';
        }

        function saveSchedule() {
            alert('定时任务配置已保存');
        }

        function clearAll() {
            if (confirm('确定要清除所有记录和配置吗？此操作不可恢复。')) {
                alert('所有记录和配置已清除');
                document.querySelector('.progress-fill').style.width = '0%';
                document.getElementById('statusText').textContent = '准备就绪';
                document.getElementById('successCount').textContent = '0';
                document.getElementById('warningCount').textContent = '0';
                document.getElementById('errorCount').textContent = '0';
                document.getElementById('totalCount').textContent = '0';
            }
        }

        // 初始化选择状态
        document.querySelectorAll('.checkbox-item').forEach(item => {
            if (item.classList.contains('selected')) {
                item.querySelector('.checkbox').classList.add('checked');
            }
        });
    </script>
</body>
</html>